<template  >
  <div class="header">
<!-- <div>
  <img src="https://img1.baidu.com/it/u=700675537,3936578503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656608400&t=675086a55a1681c082a59d039d216e13" alt="">
</div> -->
    <van-nav-bar
     
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      color="transparent">

      <template #left>
        <van-icon name="arrow-left"  @click="$router.go(-1)" color="#262626" size="30px"/>
        </template>
    </van-nav-bar>
    
  
    <form action="" @submit.prevent="onSubmit" >
      <h5>Login_</h5>
      <input type="text" v-model="username" placeholder="YOU-NAME">
      <input type="password" v-model="password" placeholder="YOU-PASSWORD">
      <button>READY...</button>
       <p>还没有账号，去<span @click="toRegister()">注册</span></p>
    </form>
   
      <!-- <van-form @submit="onSubmit" class="bacolor">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form> -->
   
  </div>
</template>

<script>
import { requestMyList } from "@/api/My";
//加密
import { sha256 } from 'js-sha256'
export default {
  data() {
    return {
      userlist: {},
      token:{},
      username: "",
      password: "",
    };
  },
   created(){
     let redirect = this.$route.query.redirect
     console.log('redirect', redirect);
     if(redirect == 1){
      this.$dialog.alert({
          message: "请先登录",
        });
     }
  },
  methods: {
    toRegister:function(){
      this.$router.push('/register')
    },
    async onSubmit() {


      let res = await requestMyList(this.username, sha256(this.password));

      let data = res.data;
     let token=   this.token=data.token
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        this.userlist = resultInfo;
        let user = this.userlist; 
        this.$store.dispatch("saveToken",token)
        this.$store.dispatch("initUser", user);
        this.$dialog.alert({
          message: "登录成功",
        });
        this.$router.push({ path: "/my" });
      }else{
       this.$dialog.alert({
          message: "密码或用户名错误",
        });
      }
    },
  },
};
</script >


<style scoped lang="scss">
.header{
width:100% ;
height: 100vh;
background:url("../../../assets/img/di.png")-106px -3px ;
  // /** background-image: url(https://img1.baidu.com/it/u=700675537,3936578503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656608400&t=675086a55a1681c082a59d039d216e13);*/
  /**background:linear-gradient(to right top,#2b45ce,#bf8675); */
p{
  font-weight: 600;
  margin: auto;
  width: 150px;
  margin-top: 50px;
}
span{
  color: #dd2f22;
  font-weight: 600;

}
}
.van-nav-bar{
  margin-bottom: 30px;
}  
form{
  margin:50% auto;
  width: 300px;
  text-align: center;
  height: 400px;
  h5{
    font-weight: 600;
    color:black;
    font-size: 30px;
    margin-bottom: 40px;
  }
}
input{
  width: 300px;
  height: 70px;
  margin: auto;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  background-color: transparent;
  border-bottom: 1px solid rgb(114, 114, 114);
}
button{
  color: white;
  background-color: #dd2f22;
  width: 300px;
  margin-top: 60px;
  height: 60px;
  border: none;
}

</style>
